<template>
  <div>
    <Header :title="t('flypass.pass')" />
    <el-card class="card">
      <el-tabs v-model="activeTab">
        <el-tab-pane name="topicName" :label="topicName">
          <template #label>
            <el-input :placeholder="t('flypass.press-enter-to-add-new-topic')" @keydown.enter="requestRenameTheme" style="width: 250px" ref="input" v-if="showEdit" size="small" v-model="inputVal" v-clickoutside="onClickOutside" />
            <template  v-else>       
              <span class="mr-1">{{topicName}}</span>
              <el-button text size="small" @click="onTopicNameEdit">
                <svg-icon icon-class="Edit"></svg-icon>
              </el-button>
            </template>     
          </template>
          <div class="templates-container">
            <div class="template" v-for="(template, index) in topicTemplate?.templatesInfoVo" @mouseenter="() => template.showBackdrop = true" @mouseleave="() => template.showBackdrop = false">
              <img  :src="baseurl + '/tempres/' + template.thumbUrl" alt="">
              <Transition name="fade">
                <div class="image-background" v-show="template.showBackdrop">  
                  <el-button type="primary" icon="edit" @click="() => onEdit(template)">{{ t('page.edit') }}</el-button>
                  <el-button type="danger" icon="delete" v-if="index === topicTemplate?.templatesInfoVo.length! - 1" @click="() => confirmDeleteTemplate(template.templateId)">{{ t('common.delete') }}</el-button>
                </div>
              </Transition>
              <span>{{ t('cmp.page_level') }} {{  template.level }}</span>
            </div>
            <div class="new-template" @click="newTemplate">
              <svg-icon icon-class="OutlinedPlus" class-name="plus-icon"></svg-icon>
              <span>{{ t('flypass.add-new-template') }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { getTopicTemplates, renameTheme } from '@/api/topic/topic';
import Header from '../components/header.vue';
import { TemplateInfo, Topic, TopicStatus } from '@/api/topic/topicModel';
import { usePassStore } from '@/store/modules/pass';
import { useTopic } from '@/views/pass-center/topic/useTopic';

defineOptions({ name: 'TopicDetail' });

const { params } = useRoute()
const { t } = useI18n()
const { push } = useRouter()
const store = usePassStore()
const { setShowBackdrop, editTemplate, confirmDeleteTemplate } = useTopic(getData)
const topicName = ref('')
const showEdit = ref(false)
const inputVal = ref('')
const input = ref(null)
const activeTab = ref('topicName')
const topicTemplate = ref<Topic | null>(null)
const baseurl = import.meta.env.VITE_APP_PROXY

onMounted(() => {
  getData()
})

async function getData() {
  topicTemplate.value = await getTopicTemplates(params.id as string)
  topicName.value = topicTemplate.value.topicName  
  setShowBackdrop(topicTemplate.value.templatesInfoVo)
}

async function onTopicNameEdit() {  
  showEdit.value = true
  await nextTick()
  inputVal.value = topicName.value
  input.value?.focus()
}

function onClickOutside() {  
  showEdit.value = false
  inputVal.value = ''
}

async function requestRenameTheme() {
  await renameTheme({themeId: params.id as string, themeName: inputVal.value})
  showEdit.value = false
  topicName.value = inputVal.value
  inputVal.value = ''  
}

function newTemplate() {
  if(topicTemplate.value) {
    store.setTemplateLevel(topicTemplate.value.templatesInfoVo.length)
    store.setTopicId(topicTemplate.value.topicId)  
  }  
  push({path: '/pass-design/new', query:{topicId: topicTemplate.value?.topicId}})
}

function onEdit(template: TemplateInfo) {
  if(topicTemplate.value) {
    editTemplate(template, topicTemplate.value?.topicId)
  }
}
</script>

<style lang="scss" scoped>
@use './mixin.scss' as *;
@import './index.scss';
@include newTemplate;
</style>